<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - ¥{{ item.price }} - 数量：{{ item.quantity }}
        <button @click="increaseQuantity(item.id)">+</button>
        <button @click="decreaseQuantity(item.id)">-</button>
      </li>
    </ul>
    <div class="total">总价： ¥{{ totalPrice }}</div>
  </div>
</template>

<script>
export default {
  computed: {
    cart() {
      return this.$store.state.cart;
    },
    totalPrice() {
      return this.$store.getters.totalPrice;
    }
  },
  methods: {
    increaseQuantity(productId) {
      this.$store.dispatch('increaseQuantity', productId);
    },
    decreaseQuantity(productId) {
      this.$store.dispatch('decreaseQuantity', productId);
    }
  }
};
</script>

<style scoped>
.shopping-cart {
  margin: 20px;
  padding: 20px;
  border: 1px solid #eee;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 10px 0;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.total {
  font-weight: bold;
  margin-top: 10px;
  font-size: 1.2em;
}
button {
  margin-left: 10px;
}
</style>